.title-t1 {
  color: var(--color-t1);
  font-size: 48rpx;
  font-weight: 800;
}

.padding-content {
  padding: 32rpx;
  padding-top: calc(var(--status-bar-height) + 32rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx);
  position: relative;
}

.app-tabbar-default .app-tabbar__inner {
  box-shadow: 0rpx -12rpx 16rpx 0rpx rgba(0, 0, 0, 0.04);
}

.shadow-box {
  box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
}

.shadow-block {
  box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
}

.color-top-box {
  width: 100vw;
  height: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background-image: linear-gradient(to bottom, #fff1eb 0%, #f0f0f0 100%);
  z-index: 0;

  &.is-nav {
    width: 100vw;
    height: 100vw;
    position: fixed;
    position: absolute;
    z-index: 0;
  }
}

.img-top-box {
  width: 932rpx;
  height: 670rpx;
  position: fixed !important;
  top: -30rpx;
  left: -78rpx;
  z-index: 0;

  &.is-nav {
    position: absolute;
    z-index: 0;
  }
}

.align-center {
  align-items: center;
}

.main-content {
  position: inherit;
  z-index: 1;
  padding: 32rpx;
  padding-top: calc(var(--status-bar-height) + 32rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx);
}

.block-view {
  border-radius: 16rpx;
  background: #f0f0f0;
  box-shadow: 20rpx 20rpx 40rpx #cccccc,
    -20rpx -20rpx 60rpx #f0f0f0;
  overflow: hidden;
}

.button-shadow {
  border-radius: 16rpx;
  background: #f0f0f0;
  box-shadow: 10rpx 10rpx 40rpx #cccccc,
    -10rpx -10rpx 60rpx #f0f0f0;
  overflow: hidden;
}

.color-bg-anim0 {
  width: 100%;
  /* height: 100%; */
  /* Add your background pattern here */
  background: linear-gradient(-45deg,
      #f0f0f0,
      #fbc2eb,
      #ebf503,
      #02f6c1,
      #00eff8,
      #a6c1ee);
  background-size: 400% 400%;
  animation: color_gradient 30s ease infinite;
  height: 200%;
}

.color-bg-anim1 {
  width: 100%;
  /* height: 100%; */
  /* Add your background pattern here */
  background: linear-gradient(-45deg,
      #cfd9df,
      #d1fdff,
      #ff8c7f,
      #02f6c1,
      #fbc2eb,
      #fee140,
      #30cfd0);
  background-size: 400% 400%;
  animation: color_gradient 30s ease infinite;
  height: 200%;
}

.color-bg-anim2 {
  width: 100%;
  /* height: 100%; */
  /* Add your background pattern here */
  background: linear-gradient(-45deg,
      #f0f0f0,
      #ebf503,
      #00eff8,
      #02f6c1,
      #fbc2eb,
      #00eff8,
      #a6c1ee);
  background-size: 400% 400%;
  animation: color_gradient 30s ease infinite;
  height: 200%;
}

@keyframes color_gradient {
  0% {
    background-position: 0% 50%;
  }

  25% {
    background-position: 50% 100%;
  }

  50% {
    background-position: 100% 50%;
  }

  75% {
    background-position: 50% 0%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.wd-input-number {
  .wd-input-number__action {
    &::after {
      box-sizing: border-box;
    }
  }

  .wd-input-number__action-icon.wd-icon {
    top: calc(50% - 2rpx)
  }
}

.button {
  &.custom-btn {
    background-color: transparent;
    border: none;
    &::after {
      display: none;
    }
    &.vertical {
      flex-direction: column;
    }
  }
  &.wd-button {
    &.is-primary {
      &.gradient-btn {
        background: linear-gradient(90deg, #5ABDFF 0%, #0176E3 100%);
      }

      &.primary {
        background: var(--wot-color-primary-btn);


      }

      &.trans {
        background: var(--wot-litte-color-primary-btn);
        color: var(--wot-color-primary-btn);
      }

      &.is-plain {
        background: tlinear-gradient(90deg, #5ABDFF 0%, #0176E3 100%);
      }
    }



    &.icon-button {
      width: 60rpx !important;
      height: 60rpx !important;
      min-width: auto !important;
      padding: 0 !important;
      margin: 0 16rpx;
      line-height: 60rpx;
      text-align: center;

      .wd-icon {
        margin-right: 0;
      }
    }

    &.inner-btn {
      width: 100%;
      flex-shrink: 1;
      margin: 0 16rpx;
    }


    &.row-btn {
      width: 100%;
      margin-top: 32rpx;
    }

    &.inline-row-btn {
      width: 100%;
      flex-shrink: 1;
    }

    &.s-radius {
      border-radius: 8rpx !important;
    }

    &.shadow-btn {
      box-shadow: 20rpx 20rpx 40rpx #cccccc,
        -20rpx -20rpx 60rpx #f0f0f0;
    }
  }

}

.wd-segmented {
  &.small-font {
    .wd-segmented__item {
      font-size: 20rpx;
      padding: 0;
    }
  }

  .wd-segmented__item--active {}

  .wd-segmented__item {
    // background: var(--wot-segmented-item-bg-color);
    // color: var(--wot-segmented-item-color);

    &.is-active {
      color: var(--wot-segmented-item-active-color);
      transition: color 0.5s;
    }
  }
}

.wd-collapse.game-list-box {
  background: transparent !important;

  .wd-collapse-item__header {
    background: var(--wot-color-white);
  }
}

.popup-body {
  &.center-popup {
    width: 80vw;
    padding: 16rpx;

  }

  &.bottom-popup {
    width: 100vw;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;

    .popup-content {
      max-height: 70vh;
      overflow-y: auto;
      padding: 16rpx;
      width: 100vw;
      box-sizing: border-box;
    }
  }

  .popup-title {
    border-bottom: 1px solid var(--wot-color-border);
    padding-bottom: 8rpx;

    .text-title {
      width: 100%;
      line-height: 80rpx;
      text-align: center;
      font-weight: 600;

    }
  }

  .popup-content {
    padding: 16rpx 0;
  }
}

.game-comp-row {
  width: 100%;
  flex-shrink: 1;
  line-height: 48rpx;

  .VS-tag {
    margin: 0 28rpx;
    color: var(--wot-color-theme);

    &.high-light {
      color: var(--wot-color-danger);
    }
  }
}

.bottom-btn {
  margin: 16rpx -16rpx;
  margin-bottom: 0;
}

.wd-tabs {
  &.tabs-box {
    z-index: 999;
  }

  &.left-tabs {
    background: transparent !important;

    .wd-tabs__nav {
      background: transparent !important;
    }

    .wd-tabs__nav-container {
      justify-content: flex-start;

      .wd-tabs__nav-item {
        min-width: auto;
        padding: 0 30rpx;
        flex-grow: 0;
      }
    }
  }
}

.wd-tabs__nav-container {
  .wd-tabs__nav-item.is-active {
    color: var(--wot-color-primary-btn) !important;
  }

  .wd-tabs__line {
    background: var(--wot-color-primary-btn) !important;
  }
}

.wd-radio-group {


  &.topup-radio {
    padding: 24rpx;
    padding-bottom: 0;

    .wd-radio {
      &.is-button {
        width: calc(33% - 12rpx);
        margin-bottom: 20rpx;

        .wd-radio__label {
          width: 100%;
        }

        &:nth-of-type(3n) {
          margin-right: 0;
        }
      }
    }
  }
}

.app-page.is-webview {
  .app-tabbar__placeholder {
    display: none;
  }
}

.iframe {
  // html {
  //   background: #000;
  // }
}

.inherit {
  position: inherit;
}

.ellipsis-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  /* 这里设置行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.warning-color {
  color: var(--wot-color-warning);
}

.border-input {}

.optimize-list {
  border-bottom: 2rpx solid var(--wot-color-border);

  .optimize-item {
    width: 100%;
    height: 100%;

    .cell {
      border-top: 2rpx solid var(--wot-color-border);
      border-right: 2rpx solid var(--wot-color-border);
      background: var(--wot-color-white);
      padding: 16rpx;
      font-size: 24rpx;

      &:last-child {
        border-right: none;
      }
    }

    .pass {
      width: 15%;
      flex-shrink: 0;
    }

    .odds {
      width: 15%;
    }

    .comb {
      width: 35%;
      flex-grow: 1;
    }

    .multi {
      width: 30%;
      flex-shrink: 0;
    }

    .price {
      width: 20%;
      flex-shrink: 0;
    }
  }
}

.wd-tabs.hide-tab {
  &.home-list-tab {
    background: transparent;
  }

  .wd-tabs__nav {
    display: none;
  }
}

.home-tabs {
  width: 100%;
  box-sizing: border-box;

  .wd-tabs {
    flex-shrink: 1;
  }

  .wd-tabs,
  .wd-tabs__nav {
    background: transparent !important;
    background-color: transparent !important;
  }

  .text-btn {
    color: var(--color-t1);

    .wd-button__text {
      color: var(--wot-color-text);
    }
  }
}

.text-btn {
  color: var(--color-t1);

  .wd-button__text {
    color: var(--wot-color-text);
  }
}

.high-light {
  color: var(--wot-color-danger);
}

.wd-popup.wd-popup--bottom {
  z-index: 99999 !important;
  position: fixed;
}

.wd-popup-wrapper {
  // position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
}

.card-swiper {
  --wot-swiper-radius: 0;
  --wot-swiper-item-padding: 0 16rpx;
  --wot-swiper-nav-dot-color: #e7e7e7;
  --wot-swiper-nav-dot-active-color: #4d80f0;
  padding: 20rpx 0;

  .wd-swiper {
    border-radius: 12rpx;
  }

  :deep(.custom-indicator-class) {
    bottom: -16px;
  }

  :deep(.custom-image) {
    border-radius: 12rpx;
  }

  :deep(.custom-image-prev) {
    height: 168px !important;
  }
}

.home-list-body {
  min-height: calc(100vh - 128rpx - 938rpx - env(safe-area-inset-bottom));
  height: auto;

  .wd-swiper-item-container,
  .zp-swiper-item-container,
  .z-paging-content-full {
    min-height: calc(100vh - 128rpx - 938rpx - env(safe-area-inset-bottom));
    height: auto;
  }
}

.filter-row {
  background: var(--color-white);

  &.no-grow {
    .wd-drop-menu__item {
      // flex: 0;
      // width: 100%;
      justify-content: flex-start;
      display: flex;
      padding-left: 8rpx;
    }
  }
}

.top-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
}

.user-row-left-avatar .avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: #F8FAFD;
  color: #9ea0a2;
  font-size: 24rpx;
  line-height: 120rpx;
  text-align: center;
  overflow: hidden;
}

.menu-list {
  .wd-cell.menu-cell {
    padding-left: 40rpx;
    line-height: 40rpx;

    .wd-cell__wrapper {
      padding: 28rpx 0;
    }

    .wd-cell__title {
      color: var(--color-t1);
    }
  }
}

.menu-cell {
  .wd-cell__wrapper {
    padding-right: 0 !important;
  }
}

.login-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

.login-form {
  .wd-tabs {
    .wd-tabs__nav {
      height: 46rpx;

      .wd-tabs__nav-item {
        height: 46rpx;
      }

      .wd-tabs__line {
        bottom: 0
      }
    }
  }

  .wd-input__prefix {
    --at-apply: flex items-center;
  }
}